<template>
  <div>
    <!--    内容-->
    <slot/>
    <div ref="loadingTarget" class="h-6 py-4">
      <!--      加载更多-->
      <mine-svg-icon v-show="loading" class="w-4 h-4 mx-auto animate-spin" name="infinite-load"></mine-svg-icon>
      <!--      没有更多数据-->
      <p v-if="isFinished" class="text-center text-base text-zinc-400">没有更多数据了</p>
    </div>
  </div>
</template>

<script setup>

import {useVModel, useIntersectionObserver} from "@vueuse/core";
import {ref, watch} from "vue";

const props = defineProps({
  //是否处于加载状态
  modelValue: {
    type: Boolean,
    required: true
  },
  //数据是否加载完成
  isFinished: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['onLoad', 'updateModelValue'])
// 处理loading状态
const loading = useVModel(props)
//滚动的元素
const loadingTarget = ref(null)
//记录当前是否在底部的变量
const targetIntersecting = ref(null)
useIntersectionObserver(loadingTarget, ([{isIntersecting}]) => {
  targetIntersecting.value = isIntersecting
  emitLoad()
})


/**
 * 触发loading事件方法
 */
const emitLoad = () => {
  //当加载更多的视图可见时，未加载且数据未加载完成,处理加载更多的逻辑
  if (targetIntersecting.value && !loading.value && !props.isFinished) {
    //修改加载数据的标记
    loading.value = true
    emits('onLoad')
  }
}

/**
 * 监听loading的变化,解决数据加载完成之后，首屏未铺满
 */
watch(loading, (val) => {
  // 触发 load，延迟处理，等待 渲染和 useIntersectionObserver 的再次触发
  setTimeout(() => {
    emitLoad()
  }, 50)
})
</script>

